<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <BaseInfo :id="sjskPersonId" />
    <a-alert type="info" :showIcon="true" style="margin-top:20px;">
      <div slot="message">
        该 <span class="s1">{{ infoObj.sjskType == 1 ? '社戒' : '社康' }}</span> 人员定期访谈规则： <span class="s1">{{
          infoObj.detectTime
        }}</span>； 共需要做 <span class="s1"> {{ infoObj.detectTotal }} </span> 次 定期访谈；已完成
        <span class="s1"> {{
          infoObj.completeCount
        }} </span> 次，已取消 <span class="s1"> {{ infoObj.cancelTotal }} </span> 次，免除
        <span class="s1"> {{ infoObj.cancelApplyCount }} </span> 次，待访谈 <span class="s1"> {{
          infoObj.waitDetectCount
        }} </span> 次
      </div>
    </a-alert>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
      :dataSource="pageData" @change="onTableChange">
      <template slot="interviewTime" slot-scope="text, record">
        <span v-if="record.interviewStartTime == null">--</span>
        <span v-else>{{ record.interviewStartTime }} ~ {{ record.interviewEndTime }}</span>
      </template>
      <template slot="interviewAppointmentTime" slot-scope="text, record">
        <span v-if="record.interviewAppointmentStartTime == null">--</span>
        <span v-else>{{ record.interviewAppointmentStartTime }} ~ {{ record.interviewAppointmentEndTime }}</span>
      </template>
      <template slot="interviewNum" slot-scope="text">
        <span>第{{ text }}次</span>
      </template>
      <template slot="interviewClassification" slot-scope="text">
        <span v-if="text == null">--</span>
        <span v-else>{{ text }}</span>
      </template>
      <template slot="interviewActualTime" slot-scope="text">
        <span v-if="text == null">--</span>
        <span v-else>{{ text }}</span>
      </template>

      <template slot="noticeStatus" slot-scope="text">
        <span v-if="text == '1'">已通知</span>
        <span v-if="text == '2'">待通知</span>
      </template>
      <template slot="status" slot-scope="text,record">
        <span v-if="text == '1'" style="color:#27BF44">待预约</span>
        <span v-if="text == '2'" style="color:#108EE9">待录入</span>
        <span v-if="text == '3'" style="color:#FAAD14">补录申请中</span>
        <span v-if="text == '4'" style="color:#FAAD14">取消申请中</span>
        <span v-if="text == '5'" style="color:#D9001B">已逾期 <a-tag color="red" style="margin-left:5px;"
            v-if="record.overdueResponsibilityName">
            {{ record.overdueResponsibilityName }}
          </a-tag></span>
        <span v-if="text == '6'">已完成</span>
        <span v-if="text == '7'">已取消</span>
        <span v-if="text == '8'" style="color:#999">待开始</span>
        <span v-if="text == '9'">免除</span>
      </template>
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <template v-if="record.status == '1'">
          <a-button @click="onBooking(2, record)" type="link" style="padding: 0">预约访谈
          </a-button>
          <a-divider type="vertical" />
        </template>
        <template v-if="record.status == '1' || record.status == '2'">
          <a-button @click="onInput(1, record)" type="link" style="padding: 0">谈话录入</a-button>
          <a-divider type="vertical" />
        </template>
        <template v-if="record.status == '2'">
          <a-button @click="onBooking(3, record)" type="link" style="padding: 0">改约</a-button>
          <a-divider type="vertical" />
        </template>
        <template
          v-if="record.status == '3' || record.status == '4' || record.overdueResponsibilityName != '专干' && record.status == '5'">
          <a-button @click="onCYX(record)" type="link" style="padding: 0">催一下</a-button>
          <a-divider type="vertical" />
        </template>
        <template
          v-if="record.status == '3' || record.status == '4' || record.overdueResponsibilityName != '专干' && record.status == '5'">
          <a-button @click="onCX(record)" type="link" style="padding: 0">撤销申请</a-button>
          <a-divider type="vertical" />
        </template>
        <template v-if="record.status == '5' && record.overdueResponsibilityName == '专干'">
          <a-button @click="onInput(2, record)" type="link" style="padding: 0">谈话补录</a-button>
          <a-divider type="vertical" />
        </template>
        <template v-if="record.status != '1' && record.overdueResponsibilityName != '专干'">
          <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
          <a-divider type="vertical" />
        </template>
        <template
          v-if="record.status == '1' || record.status == '2' || record.overdueResponsibilityName == '专干' && record.status == '5'">
          <a-button @click="onCancel(record)" type="link" style="padding: 0">取消</a-button>
        </template>
      </template>
    </z-table>

    <BookingModal ref="scheduleModalId" title="访谈预约" :isInterview=true @ok="onQuery" />
    <AddInterviewModal ref="addInterviewModalId" :isInterview=true @ok="onQuery" />
    <CancelModal ref="cancelModalId" @ok="onQuery" />
    <DetailModal ref="detailModalId" />
  </a-card>
</template>

<script>
import * as interviewApi from '@/api/sjsk/help/interview.js'
import * as uroscopyApi from '@/api/sjsk/check/uroscopy.js'
import BaseInfo from '@/views/sjsk/modules/BaseInfo'
import BookingModal from './modules/BookingModal'
import AddInterviewModal from './modules/AddInterviewModal'
import CancelModal from './modules/CancelModal'
import DetailModal from './modules/DetailModal'
import { getUrge } from '@/api/sjsk/flowService'
export default {
  components: {
    BaseInfo,
    BookingModal,
    AddInterviewModal,
    CancelModal,
    DetailModal
  },

  data() {
    return {
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '访谈次数',
          dataIndex: 'interviewNum',
          align: 'center',
          scopedSlots: { customRender: 'interviewNum' },
        },
        {
          title: '访谈分类',
          dataIndex: 'interviewClassification',
          align: 'center',
          scopedSlots: { customRender: 'interviewClassification' },
        },
        {
          title: '计划时间',
          dataIndex: 'interviewTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewTime' },
        },
        {
          title: '预约时间',
          dataIndex: 'interviewAppointmentTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewAppointmentTime' }
        },
        {
          title: '通知状态',
          dataIndex: 'noticeStatus',
          align: 'center',
          scopedSlots: { customRender: 'noticeStatus' },
        },
        {
          title: '录入状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '谈话时间',
          width: 120,
          dataIndex: 'interviewActualTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewActualTime' },
        },
        {
          title: '操作',
          width: 250,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      sjskPersonId: this.$route.query.sjskPersonId,
      pageData: {},
      infoObj: {}
    }
  },
  created() { },
  async mounted() {
    this.getStatistical()
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    getStatistical() {
      interviewApi.sjskInterviewStatistical({ sjskPersonId: this.$route.query.sjskPersonId }).then((res) => {
        if (res.success) {
          this.infoObj = res.result ? res.result : {}
        }
      })
    },
    refreshTable() {
      this.loading = true
      let params = Object.assign(this.pageFilter, { sjskPersonId: this.sjskPersonId, interviewType: 1 }) //定死为定期访谈
      interviewApi.sjskInterviewData(params).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onBooking(type, record) {
      if (type == 2) { //预约
        this.$refs.scheduleModalId.show(2, record)
      }
      if (type == 3) { //改约
        this.$refs.scheduleModalId.show(3, record)
      }
    },
    onInput(type, record) {
      this.$refs.addInterviewModalId.show(type, record)
    },
    onDetail(record) {
      this.$refs.detailModalId.show(record.id)
    },
    onCancel(record) {
      this.$refs.cancelModalId.show(record)
    },
    onCYX(record) {
      getUrge({ taskId: record.id, taskType: '19' }).then((res) => { //取消常规尿液检测审批
        if (res.success) {
          this.$message.success(res.message);
          this.onQuery()
        } else {
          this.$message.warning(res.message);
        }
      });
      // uroscopyApi.urge({ businessId: record.id, urineType: record.urineType }).then((res) => {
      //   if (res.success) {
      //     this.$message.success(res.message);
      //     this.onQuery()
      //   } else {
      //     this.$message.warning(res.message);
      //   }
      // });
    },
    onCX(record) {
      let that = this;
      // let flowType = ""
      // if (record.urineType == 1) flowType = "18" //常规尿检,审批流程类型18
      // if (record.urineType == 2) flowType = "19" //突击尿检,审批流程类型19
      // if (record.urineType == 3) flowType = "20" //常规发检,审批流程类型20
      // if (record.urineType == 4) flowType = "21" //突击发检,审批流程类型21
      this.$confirm({
        title: `还在审批中，确定要撤销吗?`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          uroscopyApi.undoApply({ taskId: record.id, type: '24' }).then((res) => { //取消定期访谈审批，审批流程类型24
            if (res.success) {
              that.$message.success(res.message);
              that.onQuery()
            } else {
              that.$message.warning(res.message);
            }
          });
        }
      });
    },
  },
}
</script>
<style lang="less" scoped>
.s1 {
  color: #1890FF;
}
</style>
